<template>
    <view class="container">
        <view class="doctor-list">
            <view v-for="(doctor, index) in doctors" :key="index" class="doctor-item">
                <text class="doctor-name">{{ doctor.name }}</text>
                <text class="doctor-specialty">{{ doctor.specialty }}</text>
                <text class="doctor-hospital">{{ doctor.hospital }}</text>
            </view>
        </view>
    </view>
</template>

<script setup>
    const doctors = [
        {
            name: '张医生',
            specialty: '内科',
            hospital: '北京市医院'
        },
        {
            name: '王医生',
            specialty: '外科',
            hospital: '上海市医院'
        },
        {
            name: '李医生',
            specialty: '儿科',
            hospital: '广州市医院'
        }
    ];

</script>

<style scoped>
    .container {
        padding: 20px;
    }
    .title {
        font-size: 24px;
        font-weight: bold;
    }

    .doctor-item {
        border: 1px solid #ccc;
        border-radius: 5px;
        padding: 10px;
        margin-bottom: 10px;
    }

    .doctor-name {
        font-weight: bold;
        font-size: 18px;
        margin-bottom: 5px;
    }

    .doctor-specialty {
        margin-bottom: 5px;
    }

    .doctor-hospital {
        color: #888;
    }

</style>
